import React, { useEffect, useState } from 'react'
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min + 1)) + min //含最大值，含最小值
}
export default function Test() {
  console.log('test组件执行了')
  // 这个状态用于给组件更新
  const [c, setC] = useState(0)
  // useEffect的作用: 模拟类组件中的componentDidMount,componentDidUpdate,componentWillUnmount
  // 注意: 第二个参数的作用:
  // 1. 不写第二个参数,外层函数模拟挂载和更新.内部函数模拟卸载
  // 2. 写了一个空数组,则外层函数只模拟挂载,内部还是模拟卸载
  // 3. 写了数组,数组中监听了state或props数据,则监听的数据发生变化,外层就模拟更新,监听的数据没有变化,则外层就不模拟更新
  useEffect(() => {
    console.log('Test组件挂载或更新了')
    //订阅 PubSub.subscribe(...)
    return () => {
      console.log('Test组件卸载了')
      // 清除订阅
      //   PubSub.unsubscribe(...)
    }
  }, [c])
  return (
    <div>
      Test,{c}
      <button
        onClick={() => {
          setC(getRandomIntInclusive(1, 2))
        }}
      >
        按钮
      </button>
    </div>
  )
}
